<template>
    <div>
      <el-dialog :title="干预方案" :visible.sync="dialogProps.visible" width="560px"
          @open="handleDialogOpen()" v-loading="loading">
          <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
              <h2>基本信息</h2>
              <el-row>
                <el-col :span=12>
                  <label>档案号：{{this.mealModel.filenumber}}</label>
                </el-col>
                <el-col :span=10 offset=2>
                   <label>姓名：{{this.mealModel.name}}</label>
                </el-col>
              </el-row><br><br>
              <el-row>
                <el-col :span=12>
                  <label v-if="this.mealModel.sex==1">性别：男</label>
                  <label v-if="this.mealModel.sex==2">性别：女</label>
                </el-col>
                <el-col :span=10 offset=2>
                  <label>年龄：{{this.mealModel.age}}</label>
                </el-col>
              </el-row><br><br>
              <el-form ref="form" :model="form" label-width="80px">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="方案标题" placeholder="方案标题">
                      <el-input v-model="form.schemeTittle" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" offset="2">
                    <el-form-item label="执行人">
                      <!-- <el-input v-model="form.healthMgrId" size="mini"></el-input> -->
                      <el-select v-model="form.healthMgrId" placeholder="请选择" size="mini">
                        <el-option
                          v-for="(item,index) in selectList"
                          :key="index"
                          :label="item.healthMgrName"
                          :value="item.healthMgrId">
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="开始时间">
                      <el-input type="date" v-model="form.startTime" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" offset="2">
                    <el-form-item label="结束时间">
                      <el-input type="date" v-model="form.endTime" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="方案目标">
                      <el-input type="textarea" v-model="form.schemeTarget"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="饮食干预">
              <h2>饮食干预</h2>
              <el-form ref="form" :model="eat" label-width="80px">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="餐次">
                      <el-input v-model="eat.eatTimes" size="mini">
                        <i slot="suffix" style="margin-right: 10px;">次</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" offset="2">
                    <el-form-item label="份量">
                      <el-input v-model="eat.foodQuantity" size="mini">
                        <i slot="suffix" style="margin-right: 10px;">ml</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="摄入量">
                      <el-input v-model="eat.adi" size="mini">
                        <i slot="suffix" style="margin-right: 10px;">ml</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="推荐食物">
                      <el-input type="textarea" v-model="eat.recommendFood"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="运动干预">
              <h2>运动干预</h2>
              <el-form ref="sprot" :model="sprot" label-width="80px">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="运动名称">
                      <el-input v-model="sprot.sportName" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" offset="2">
                    <el-form-item label="运动时长">
                      <el-input v-model="sprot.sportTime" size="mini">
                        <i slot="suffix" style="margin-right: 10px;">分钟</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="运动周期">
                      <el-input v-model="sprot.sportCycle" size="mini">
                        <i slot="suffix" style="margin-right: 10px;">周</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" offset="2">
                    <el-form-item label="消耗量">
                      <el-input v-model="sprot.consumeCount" size="mini">
                        <i slot="suffix" style="margin-right: 10px;">卡路里</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="干预计划">
              <h2>干预计划</h2>
              <el-form ref="plain" :model="plain" label-width="80px">
                <el-row>
                  <el-col :span="10">
                    <el-form-item label="干预时间">
                      <el-input v-model="plain.interposeTime" size="mini">
                        <i slot="suffix" style="margin-right: 10px;">周</i>
                      </el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" offset="2">
                    <el-form-item label="干预形式">
                      <el-input v-model="plain.interposeShape" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="22">
                    <el-form-item label="主要内容">
                      <el-input type="textarea" v-model="plain.content" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <el-button type="primary" @click="submitBtn">确认提交</el-button>
              <el-button @click="closeBtn">取消</el-button>
            </el-tab-pane>
          </el-tabs>
      </el-dialog>
    </div>
</template>

<script>
import {addInterposeScheme,queryHealthmgrAll} from '@/api/junM/interposeScheme'
export default {
  data() {
    return {
      loading: false,
      ktm:[],
      dialogProps: {
        visible: false,
        action: '',
        title: '',
        checkReport:false
      },
      mealModel:{
        tMemberMedicalhistory:{}
      },
      diseaseLibraryNames:'',
      setmeal:[],
      checkList:[],
      checkListtrue:[],
      selectList:[],
      selectListtrue:'',

      form:{},
      eat:{},
      sprot:{},
      plain:{}
    }
  },
  methods:{
    submitBtn(){
      this.loading=true
      var id=this.mealModel.id
      alert(this.form)
      console.log(id+","+JSON.stringify(this.form)+","+this.eat+","+this.sprot+","+this.plain)
      addInterposeScheme(id,JSON.stringify(this.form),JSON.stringify(this.eat),JSON.stringify(this.sprot),JSON.stringify(this.plain))
      .then(()=>{
        this.dialogProps.visible=false
        //刷新表格
        this.$emit("save-finished")
        this.loading=false
      })
      this.dialogProps.visible=false
      this.loading=false
    },

    closeBtn(){
      this.dialogProps.visible=false
    },
    outputError(error) {
      console.log(error.response ? error.response : error.message)
      this.loading = false
      this.$message({
        showClose: true,
        message: '出错了，请按F12查看浏览器日志。',
        type: 'error'
      })
    }
  },
  filters:{
    dateFormat:function(data){
          var dt=new Date(data)
          var n=dt.getFullYear();
          var y=(dt.getMonth()+1).toString().padStart(2,"0");//补零操作
          var r=(dt.getDate()).toString().padStart(2,"0");
          dt.getHours();
          dt.getMinutes();
          dt.getSeconds();
          return n+"-"+y+"-"+r;
      }
  },
  mounted: function() {
    this.$nextTick(() => {
      this.$on('openEditRoleDialog', function(role) {
        this.mealModel = role
        this.ktm.length=0
        this.checkListtrue.length=0
        this.ktm.push(role)
        for(var i=0;i<role.tDiseaseLibrarys.length;i++){
          this.checkListtrue.push(role.tDiseaseLibrarys[i].id)
        }
        var names=""
        for(var i=0;i<this.mealModel.tDiseaseLibrarys.length;i++){
          names+=this.mealModel.tDiseaseLibrarys[i].name+","
        }
        this.diseaseLibraryNames=names.substr(0,names.length-1)
        this.selectListtrue=this.$store.state.healthMgrName
        this.dialogProps.action = 'edit'
        // this.dialogProps.title = '干预方案'
        this.dialogProps.visible = true
      })
      this.$on('openAddRoleDialog', function() {
        this.dialogProps.action = 'add'
        this.dialogProps.title = '添加膳食库'
        this.mealModel = {
          locked: false
        }
        this.dialogProps.visible = true
      })
    })
  },
  created(){
    queryHealthmgrAll()
    .then((response)=>{
      this.selectList=response.data
    })
  }
}
</script>

<style>

</style>
